<template>
  <div class="navTags">
    <div class="tagLeft">
      <span class="iconfont icon-arrow-left" @click="arrowLeft"></span>
    </div>
    <div class="tagListBox" id="tagListBox">
      <div class="tagList" :style="{left: arrowOffset+'px'}">
        <div class="tag" v-for="route in routerList" :key="route.path">
          <el-tag
            :closable="route.path !== '/dashboard'"
            @close="handleClose(route)"
            @click="jumpUrl(route)"
            :disable-transitions="true">
            <i class="c1" :class="router===route.path?'active':''"></i>
            <span>{{route.title}}</span>
          </el-tag>
        </div>
      </div>
    </div>
    <div class="tagRight">
      <span class="iconfont icon-arrow-right" @click="arrowRight"></span>
      <el-popover
        placement="bottom-start"
        width="60"
        trigger="hover">
        <div class="close_box" >
          <ul>
            <li
              v-for="(item,index) in closeList"
              :key="index"
              @click="closeTags(item.type)">
              <span>{{item.title}}</span>
            </li>
          </ul>
        </div>
        <span class="iconfont icon-close" slot="reference"></span>
      </el-popover>
    </div>
  </div>
</template>

<script>
  export default {
    name: "navTags",  // 主页右侧上部nav-tags  目录条
    props: {
      routerList: {
        type: Array,
        default: ()=> {
          return [
            { title: '首页', path: '/dashboard' }
          ]
        }
      }
    },
    data() {
      return {
        router: '',
        arrowOffset: 0,
        tagsLength: this.routerList.length,
        tagsWidth: 0,  // 所有tags的总宽度
        tagsBoxWidth: 0,  // 盒子宽度
        closeList: [
          { type: 'all', title: '关闭所有' },
          { type: 'other', title: '关闭其他' }
        ]
      }
    },
    watch: {
      $route:{
        handler(val,oldval){
          let path = val.path;
          this.router = path
        },
        deep: true,
        immediate: true
      },
      tagsLength: {
        handler(val,oldval){
          this.$nextTick(() => {
            let tagsBox = document.getElementById('tagListBox');
            this.tagsBoxWidth = tagsBox.clientWidth;
            let tags = document.getElementsByClassName('el-tag');
            let tagsWidth = 0;
            for(let i=0; i<val; i++) {
              let tagWidth = tags[i].clientWidth + 8;  // 8 其margin厚度 border厚度之和
              tagsWidth += tagWidth
            }
            this.tagsWidth = tagsWidth
          })
        },
        deep: true,
        immediate: true
      }
    },
    mounted() {
      window.onresize = () => (() => {
        let tagsBox = document.getElementById('tagListBox');
        this.tagsBoxWidth = tagsBox.clientWidth;
      })();
    },
    methods: {
      // 删除
      handleClose(tag) {
        this.$emit('deleteNavTag', tag)
      },
      // 点击跳转
      jumpUrl(tag) {
        if(this.router !== tag.path) {
          this.$emit('selectMenu', tag.path)
        }
      },
      // 向右
      arrowLeft() {
        if(this.arrowOffset < 0) {
          if(this.arrowOffset >- 100) {
            this.arrowOffset = 0
          }else{
            this.arrowOffset += 100
          }
        }
      },
      // 向左
      arrowRight() {
        let offsetLeft = this.arrowOffset + this.tagsWidth - this.tagsBoxWidth;
        if(offsetLeft > 0) {
          if(offsetLeft < 100) {
            this.arrowOffset -= offsetLeft
          }else{
            this.arrowOffset -= 100
          }
        }
      },
      // 关闭所有或其他
      closeTags(type) {
        if(type === 'all') {
          this.$emit('clearNavTag', type, '');
        }else{
          this.$emit('clearNavTag', type, this.router);
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .navTags {
    height: 36px;
    display: flex;
    span.iconfont{
      display: inline-block;
      width: 23px;
      height: 30px;
      margin: 3px 1px;
      border-radius: 3px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }
    span.iconfont:hover{
      color: rgba(88, 157, 246, 1);
      border: 1px solid rgba(88, 157, 246, 0.6);
    }
    .tagLeft{
      width: 25px;
    }
    .tagListBox{
      width: calc(100% - 75px);
      position: relative;
      overflow: hidden;
      .tagList{
        display: flex;
        flex-wrap: nowrap;
        position: absolute;
        transition: all 0.5s;
        .tag{
          border-radius: 3px;
          margin: 3px;
        }
        /deep/ .el-tag{
          cursor: pointer;
          height: 30px;
          line-height: 30px;
          background: transparent;
          border: none;
          color: #515a6e;
          i.c1{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #f0f0f0;
            margin-right: 5px;
          }
          i.c1.active{
            background: rgba(45, 140, 240, 1);
          }
          i.el-icon-close{
            color: #515a6e;
          }
          i.el-icon-close:hover{
            color: #fff;
            background: rgba(45, 140, 240, 0.5);
          }
        }
      }
    }
    .tagRight{
      width: 50px;
    }
  }
</style>
<style lang="scss" scoped>
  .close_box{
    ul{
      li{
        cursor: pointer;
        line-height: 30px;
        padding: 0 6px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        span{
          margin-left: 4px;
        }
      }
      li:hover{
        background: #f5f5f5;
      }
    }
  }
</style>
